<template>
    <div class="setting-content content w oh">
        <!-- 单行文本 | 下拉框 | 单选按钮组-->
        <template v-if="['single-text', 'select', 'radio-btns'].includes(model_type)">
            <template v-if="['radio-btns', 'select'].includes(form.type)">
                <div class="flex-col gap-10">
                    <el-select ref="selectRef" v-model="form_value" multiple :multiple-limit="1" filterable placeholder="" :popper-class="form.multicolour == '1' ? 'multicolour-select' : ''" class="flex-1 border-focus" :style="frame_style + style_container" @change="select_change">
                        <el-option v-for="item in form.option_list" :key="item.value" :value="item.value" :label="item.name" :class="['flex-row align-c select-option' , { 'selected-bg': form_value.includes(item.value) && form.multicolour == '1', 'selected-color': form_value.includes(item.value) && form.multicolour !== '1' }]" @click="select_click(item.value)"><div :style="option_style(item)">{{ item.name }}</div></el-option>
                        <template #tag>
                            <template v-if="isEmpty(form_value)">
                                <div class="select-tag" :style="common_styles">{{ form.placeholder }}</div>
                            </template>
                            <template v-else>
                                <div v-for="item in form.option_list.filter((item1: any) => form_value.includes(item1.value))" :key="item.value" :style="option_style(item)">{{ item.name }}</div>
                            </template>
                        </template>
                    </el-select>
                    <template v-if="form_value == 'other'">
                        <el-input v-model="form.other_value" class="border-focus" :style="frame_style + style_container" :minlength="form.is_limit_num == '1' ? form.min_num : ''" :maxlength="form.is_limit_num == '1' ? form.max_num : ''" placeholder="请填写内容"></el-input>
                    </template>
                </div>
            </template>
            <template v-else>
                <el-input v-model="form_value" class="border-focus" :style="frame_style + style_container" :placeholder="form.placeholder" @blur="data_check(true)" @change="data_check(true)"></el-input>
            </template>
        </template>
        <!-- 多行文本 -->
        <template v-else-if="model_type == 'multi-text'">
            <el-input v-model="form_value" type="textarea" class="border-focus" :style="frame_style + style_container + 'height: auto'" :minlength="form.is_limit_num == '1' ? form.min_num : ''" :maxlength="form.is_limit_num == '1' ? form.max_num : ''" :autosize="{ minRows: 4, maxRows: 8 }" :placeholder="form.placeholder" @blur="data_check(false)" @change="data_check(false)"></el-input>
        </template>
        <!-- 数字 -->
        <template v-else-if="model_type == 'number'">
            <number-input v-model="form_value" :decimal-num="form.is_decimal == '1' ? form.decimal_num : 0" :money-sign="form.is_display_money == '1' ? form.money_sign : ''" :format="form.format" :is-thousandths-symbol="form.is_thousandths_symbol" :is-percentage="form.format == 'percentage'" :placeholder="form.placeholder" class="border-focus" :style="frame_style + style_container" @blur="data_check(true, 'number')" @change="data_check(true, 'number')"></number-input>
        </template>
        <!-- 日期时间 -->
        <template v-else-if="model_type == 'date'">
            <template v-if="['option1', 'option2'].includes(form.date_type)">
                <div class="re w h border-focus" :style="frame_style + style_container + 'height: 100%;'">
                    <el-time-picker v-model="form_value" class="model-date" :style="frame_style + 'width:100%;box-sizing:border-box;'" clearable :placeholder="form.placeholder" :format="date_style_format" @focus="time_focus" @blur="time_blur" />
                    <icon v-if="is_time_icon_show" :name="form.icon_name" class="custom-icon" size="16" @click="custom_icon_click"></icon>
                </div>
            </template>
            <template v-else>
                <div class="re w h border-focus" :style="frame_style + style_container + 'height: 100%;'">
                    <el-date-picker v-model="form_value" class="model-date" :style="frame_style + 'width:100%;box-sizing:border-box;'" :type="form.date_type == 'option3' ? 'month' : form.date_type == 'option4' ? 'date' : 'datetime'" clearable :placeholder="form.placeholder" :value-format="date_style_format" :format="date_style_format" @focus="time_focus" @blur="time_blur" />
                    <icon v-if="is_time_icon_show" :name="form.icon_name" class="custom-icon" size="16" @click="custom_icon_click"></icon>
                </div>
            </template>
        </template>
        <!-- 日期时间组 -->
        <template v-else-if="model_type == 'date-group'">
            <template v-if="['option1', 'option2'].includes(form.date_type)">
                <div class="re w h border-focus" :style="frame_style + style_container + 'height: 100%'">
                    <el-time-picker v-model="form_value" class="model-date" :style="frame_style + 'width:100%;box-sizing:border-box;'" is-range clearable :start-placeholder="form.start_placeholder" :end-placeholder="form.end_placeholder" :format="date_style_format" @focus="time_focus" @blur="time_blur" />
                    <icon v-if="is_time_icon_show" :name="form.icon_name" class="custom-icon" size="16" @click="custom_icon_click"></icon>
                </div>
            </template>
            <template v-else>
                <div class="re w h border-focus" :style="frame_style + style_container + 'height: 100%'">
                    <el-date-picker v-model="form_value" class="model-date" :style="frame_style + 'width:100%;box-sizing:border-box;'" :type="form.date_type == 'option3' ? 'monthrange' : form.date_type == 'option4' ? 'daterange' : 'datetimerange'" clearable :start-placeholder="form.start_placeholder" :end-placeholder="form.end_placeholder" :value-format="date_style_format" :format="date_style_format" @focus="time_focus" @blur="time_blur" />
                    <icon v-if="is_time_icon_show" :name="form.icon_name" class="custom-icon" size="16" @click="custom_icon_click"></icon>
                </div>
            </template>
        </template>
        <!-- 多选按钮组 ｜ 下拉复选框 -->
        <template v-else-if="['checkbox', 'select-multi'].includes(model_type)">
            <el-select v-model="form_value" multiple placeholder="" class="multi-select flex-1 border-focus" popper-class="custom-select" :style="frame_style + style_container" @change="data_check(true, 'checkbox')" @visible-change="input_value = ''">
                <template #header>
                    <el-input v-model="input_value" class="search-select-input" placeholder="搜索(多个关键字用空格隔开)" :prefix-icon="Search" size="large" />
                </template>
                <el-checkbox v-model="selectAll" :indeterminate="indeterminate" class="pl-20 mb-10 w" @change="handleCheckAllChange">{{ !isEmpty(input_value) ? '搜索结果全选' : '全选' }}</el-checkbox>
                <el-checkbox-group :model-value="form_value" class="select-multi-checkbox flex-col gap-10" @change="data_check(true, 'checkbox')">
                    <el-option v-for="item in new_option_list" :key="item.value" :value="item.value" :label="item.name">
                        <el-checkbox :value="item.value" :label="item.name"><div :style="option_style(item)">{{ item.name }}</div></el-checkbox>
                    </el-option>
                </el-checkbox-group>
                <template v-if="form.is_add_option == '1'" #footer>
                    <div v-if="!popover_visible" class="add-option flex-row gap-10 align-c pl-20" @click="add_option">
                        <icon name="add-wide" size="14" color="#2a94ff"/>
                        <span class="size-14 cr-primary">添加选项</span>
                    </div>
                    <div v-else class="flex-col gap-10 align-c jc-sb w h">
                        <el-form ref="ruleFormRef" :model="popover_form" :rules="rules" class="w h" label-width="0" status-icon>
                            <el-form-item label-width="0" prop="popover_option" class="mb-0">
                                <el-input v-model="popover_form.popover_option" placeholder="请填写内容，enter确定" type="small" @change="confirm(ruleFormRef)"></el-input>
                            </el-form-item>
                        </el-form>
                        <div style="text-align: left;">
                            <el-button size="small" text @click="cancle(ruleFormRef)">取消</el-button>
                            <el-button size="small" type="primary" @click="confirm(ruleFormRef)">确定</el-button>
                        </div>
                    </div>
                </template>
                <!-- 选中之后的效果 -->
                <template #tag>
                    <template v-if="isEmpty(form_value)">
                        <div class="select-tag" :style="common_styles">{{ form.placeholder }}</div>
                    </template>
                    <template v-else>
                        <template v-if="form.is_multicolour == '1'">
                            <div v-for="item in form.option_list.filter((item1: any) => form_value.includes(item1.value))" :key="item.value" :style="option_style(item) + 'white-space: nowrap;'">{{ item.name }}</div>
                        </template>
                        <template v-else> 
                            <div class="text-line-1" :style="common_styles">{{ selected_names }}</div>
                        </template>
                    </template>
                </template>
            </el-select>
        </template>
        <!-- 定位 -->
        <template v-else-if="model_type == 'position'">
            <div class="pc-disable flex-row align-c jc-c w h" :style="frame_style + style_container">
                <div class="flex-row align-c jc-c gap-10 text-line-1 plr-5">
                    <icon name="latitude-location" color="#000"></icon>
                    请在移动端打开表单进行定位
                </div>
            </div>
        </template>
        <!-- 地址 -->
        <template v-else-if="model_type == 'address'">
            <div class="flex-col gap-10 align-c" :style="frame_style + 'height: 100%;'">
                <el-cascader v-model="form_value" :options="common_store.address_list" class="border-focus" :style="frame_style + style_container" :props="{ 'value': 'id', 'label': 'name', 'children': 'items' }" filterable @change="data_check(false, 'address')" />
            </div>
        </template>
        <!-- 密码 -->
        <template v-else-if="model_type == 'pwd'">
            <el-input v-model="form_value" :type="pwd_is_show ? 'password' : ''" class="border-focus" :style="frame_style + style_container" :placeholder="form.placeholder" @change="data_check(false)">
                <template #prefix>
                    <icon :name="form.icon_name" color="#999"></icon>
                </template>
                <template #suffix>
                    <icon :name="pwd_is_show ? 'eye' : 'eye-close'" color="#999" @click="eye_change"></icon>
                </template>
            </el-input>
        </template>
        <!-- 评分 -->
        <template v-else-if="model_type == 'score'">
            <custom-rate v-model="form_value" :max="form.total" :select-color="form.select_color" :type="form.score_type" :style="frame_style + 'height:100%;'" size="16" @change="data_check(false, 'score')"/>
        </template>
        <!-- 上传图片｜上传视频 ｜ 上传文件 -->
        <template v-else-if="['upload-img', 'upload-video', 'upload-attachments'].includes(model_type)">
            <el-dropdown trigger="click" max-height="300px" size="large" placement="bottom-start" :hide-on-click="false" popper-class="subform-upload-setting-box" class="subform-upload-setting-box">
                <template v-if="form_value.length > 0">
                    <div class="w h flex-row align-s gap-3 oh pa-4">
                        <div v-for="(item, index) in form_value" :key="index" class="w h flex-row align-c"> 
                            <template v-if="model_type === 'upload-img'">
                                <el-image :src="item.url" fit="contain" class="h" @click="preview_event(item.url, item.raw.name)">
                                    <template #error>
                                        <div class="bg-f5 img flex-row jc-c align-c radius h w">
                                            <icon name="error-img" size="12"></icon>
                                        </div>
                                    </template>
                                </el-image>
                            </template>
                            <template v-else-if="model_type === 'upload-video'">
                                <video :src="item.url" class="radius-sm w h" @click="preview_event(item.url, item.raw.name)"></video>
                            </template>
                            <template v-else>
                                <el-tooltip class="radius-sm w h" effect="dark" :content="item.name">
                                    <div class="upload-file flex-row align-c jc-c">{{ new_name(item.raw.name)[1].toUpperCase() }}</div>
                                </el-tooltip>
                            </template>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="w h"></div>
                </template>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <upload-setting :value="form_value" :accept-type="model_type == 'upload-img' ? 'img' : model_type == 'upload-video' ? 'video' : 'file'" :file-size-limit="form.is_limit_size == '1' ? form.upload_size : ''" :limit="form.is_limit_num == '1' ? form.limit : ''" :upload-style="frame_style + style_container" @change="upload_change" />
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </template>
        <!-- 文本 -->
        <template v-else-if="model_type == 'text'">{{ form_value }}</template>
        <!-- 图片 -->
        <template v-else-if="model_type == 'img'">
            <image-empty v-model="form.img_src[0]" fit="contain" class="w h"></image-empty>
        </template>
        <!-- 视频 -->
        <template v-else-if="model_type == 'video'">
            <div class="re oh w h">
                <video v-show="is_video_play" ref="videoPlayer" :src="form.video[0]?.url || ''" controls class="w h"></video>
                <template v-if="!is_video_play">
                    <template v-if="(!isEmpty(form.video) && isEmpty(form.video_img))">
                        <video :src="form.video[0].url" controls class="w h"></video>
                    </template>
                    <template v-else>
                        <image-empty v-model="form.video_img[0]" error-img-style="width:60px;height:60px;"></image-empty>
                    </template>
                    <img :src="video_src" class="middle box-shadow-sm round" width="20" height="20" @click="video_change" />
                </template>
            </div>
        </template>
        <!-- 文件 -->
        <template v-else-if="model_type == 'attachments'">
            <template v-if="form.file.length > 0">
                <div class="flex-row gap-20 align-c">
                    <span class="file-title text-line-1">{{ form.file[0].original || '' }}</span>
                    <div class="oprate">
                        <div class="icon" @click.stop="copy(form.file[0].url)">
                            <icon name="copy" size="10"/>
                        </div>
                        <span class="divider"></span>
                        <div class="icon" @click="download(form.file[0].original, form.file[0].url)">
                            <icon name="download-btn" size="10"></icon>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <span class="file-title">暂无文件</span>
            </template>
        </template>
        <template v-else>
            <div class="pa-16 cr-6 mt-40 pt-40 tc">暂无设置</div>
        </template>
    </div>
</template>

<script setup lang="ts"> 
import { color_change } from "@/utils/common";
import { common_styles_computer, date_style_options, get_border_left_right_size, get_math, isEmpty } from "@/utils";
import { commonStore } from "@/store";
import type { ElSelect, FormInstance, FormRules } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { cloneDeep } from "lodash";
import { PropType } from "vue";
const common_store = commonStore();
const model_type = defineModel('type', { type: String, default: () => '' });
const form = defineModel({ type: Object, default: () => ({}) });
// 定义 form_value 类型
type FormValueType = string | number | Array<any> | Record<string, any>;
const props = defineProps({
    value: {
        type: [String, Number, Array] as PropType<FormValueType>,
        default: () => {},
    },
    subformKey: {
        type: String,
        default: '',
    }
});
const form_value = ref<any>(props.value);
const emit = defineEmits(['change', 'data_check']);
watch(() => props.value, (val) => {
    if (val !== form_value.value) {
      form_value.value = val;
    }
}, { immediate: true });
// 数据发生变化时传递给父组件
watch(() => form_value.value, (val) => {
    emit('change', val);
}, { deep: true });
//#region 单行文本 | 下拉框 | 单选按钮组
// 没有彩色时的公共样式
const common_styles = computed(() => `${ common_store.color_style };padding-left:0rem;padding-right:0rem;`);
const option_style = (val: any) => {
    if (form.value.is_multicolour == '1') {
        return `background:${ val.color };color:${ val.is_other == '1' ? '#141E31' : '#fff'};border-radius:0.4rem;${ common_store.color_style }`;
    } else {
        return common_styles.value;
    }
}
const data_check = (is_format: boolean = false, type: string = '') => {
    emit('data_check', { is_format, type });
};
const select_change = (val: any) => {
    form_value.value = Array.isArray(val) ? val[0] : val;
    setTimeout(() => {
        emit('data_check', { is_format: false, type: 'select' });
    }, 0);
}
// 关闭下拉框
const selectRef = ref<InstanceType<typeof ElSelect> | null>(null);
// 单选选择框为了兼容颜色设置，清空老数据并赋值新数据
const select_click = (val: any) => {
    if (!form_value.value.includes(val)) {
        form_value.value = val;
    }
    // 点击之后关闭下拉框的弹出框
    if (selectRef.value) {
        selectRef.value.blur();
    }
}
//#endregion
//#region 时间选择器内容出现
const date_style_format = computed(() => {
    const data = new Map(date_style_options(form.value.date_style).map(item => [item.value, item]));
    return data.get(form.value.date_type)?.label || 'YYYY-MM-DD HH:mm:ss';
});
const is_time_icon_show = ref(true);
const time_focus = () => {
    if (!isEmpty(form_value.value)) {
        is_time_icon_show.value = false;
    } else {
        is_time_icon_show.value = true;
    }
};

const time_blur = () => {
    is_time_icon_show.value = true;
    emit('data_check', { is_format: false, type: 'time' });
};
const el_time = ref<any>(null);
const custom_icon_click = () => {
    if (el_time.value) {
        if (!isEmpty(form_value.value)) {
            is_time_icon_show.value = false;
        } else {
            is_time_icon_show.value = true;
        }
        el_time.value.focus();
    }
};
//#endregion
//#region 多选下拉框全选和反选的处理
const selected_names = computed(() => {
    const optionList = form.value?.option_list || [];
    const formValue = form_value.value || [];

    const valueSet = new Set(formValue);
    return optionList
    .filter((item: { value: any; name: string }) => valueSet.has(item.value))
    .map((item: { name: string }) => item.name)
    .join(',');
});
// 搜索框筛选内容
const new_option_list = computed(() => {
    if (!isEmpty(input_value.value)) {
        const inputValue = input_value.value.split(' ').filter(item => item !== '');
        return form.value.option_list.filter((item: { value: string }) => inputValue.some(keyword => item.value.includes(keyword)));
    } else {
        return form.value.option_list;
    }
    
});
const selectAll = ref(false);
const input_value = ref('');
const indeterminate = ref(true);
watchEffect(() => {
    if (['checkbox', 'select-multi'].includes(model_type.value)) {
        if (!isEmpty(input_value.value)) {
            // 判断符合条件的数据中选中多少个
            const count = new_option_list.value.reduce((acc : number, item: { value: string }) => form_value.value.includes(item.value) ? acc + 1 : acc, 0);
            const flag = count > 0 && count < new_option_list.value.length;
            selectAll.value = count == new_option_list.value.length;
            indeterminate.value = flag;
        } else {
            const valueSet = new Set(form_value.value);
            const flag = valueSet.size > 0 && valueSet.size < form.value.option_list.length;
            selectAll.value = valueSet.size == form.value.option_list.length;
            indeterminate.value = flag;
        }
    }
});
// 全选操作时的处理
const handleCheckAllChange = () => {
    if (!isEmpty(input_value.value)) {
        // 判断有多少个符合筛选条件的数据
        const option_list_value = new_option_list.value.map((item: { value: any }) => item.value);
        form_value.value = selectAll.value ? cloneDeep(form_value.value).concat(option_list_value) : cloneDeep(form_value.value).filter((item: any) => !option_list_value.includes(item))
    } else {
        form_value.value = selectAll.value ? form.value.option_list.map((item: { value: any }) => item.value) : []
    }
    emit('data_check', { is_format: false, type: 'checkbox' });
}
//#endregion
// #region 添加选项相关
type popoverForm = {
    popover_option: string;
}
const popover_form = reactive<popoverForm>({
    popover_option: '',
});
const rules = reactive<FormRules<popoverForm>>({
    popover_option: [
        { required: true, message: '请输入选项名称', trigger: ['change', 'blur'] },
    ],
});
const ruleFormRef = ref<FormInstance>();
const popover_visible = ref(false);
// 点击添加选项
const add_option = () => {
    popover_visible.value = true;
};
// 取消添加选项
const cancle = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    popover_visible.value = false;
};
// 确认添加选项时的操作
const confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
        const value = 'option' + get_math();
        form.value.option_list.push({
            name: popover_form.popover_option,
            value: value,
            color: color_change(form.value.option_list.length - 1),
        });
        form_value.value.push(value);
        popover_visible.value = false;
    }
  })
}
//#endregion
//#region 密码
const pwd_is_show = ref(true);
const eye_change = () => {
    pwd_is_show.value = !pwd_is_show.value;
};
//#endregion
//#region 上传
const upload_change = (value: any) => {
    form_value.value = value;
    setTimeout(() => {
        emit('data_check', { is_format: false, type: 'upload' });
    }, 0);
}
// file转换成base64
const file_to_base64 = (file: any) => {
	return URL.createObjectURL(file);
};
// 预览开关
const preview_switch_img = ref(false);
const preview_switch_video = ref(false);
// 视频预览的路径
const preview_url = ref('');
const preview_name = ref('');
// 预览图片/视频
const preview_event = (item: any, name: string) => {
    preview_url.value = item;
	preview_name.value = name;
    if (model_type.value == 'img') {
        preview_switch_img.value = true;
    } else if (model_type.value == 'video' || model_type.value == 'file') {
        preview_switch_video.value = true;
    }
};
// 预览关闭
const preview_close = () => {
    preview_switch_img.value = false;
};
// 名字和格式拆开显示
const new_name = (name: string) => {
    let index = name.lastIndexOf('.'); // 获取最后一个/的位置
	let lastSegment = name.substring(index + 1); // 截取最后一个/后的值
	let new_name = name.substring(0, index);
	return [ new_name, lastSegment]
};
//#endregion
//#region 文件
// 复制到剪切板
const copy = (url: string) => {
    /* 创建一个临时的textarea元素 */
    const textarea = document.createElement('textarea');
    textarea.value = url;
    document.body.appendChild(textarea);
    textarea.select();
    try {
        const successful = document.execCommand('copy');
        const msg = successful ? '成功复制！' : '复制失败';
    } catch (err) {
        console.error('复制失败', err);
    }

    document.body.removeChild(textarea);
}
// 文件下载
const download = (name: string, url: string) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = name;
    link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
    document.body.appendChild(link);
    link.click();
	document.body.removeChild(link);
}
//#endregion
//#region 视频
const video_src = ref(common_store.common.config.attachment_host + `/static/diy/images/components/model-video/video.png`);
// 视频播放处理逻辑
const videoPlayer = ref<HTMLVideoElement | null>(null);
const is_video_play = ref(false);
const video_change = () => { 
    const videoEl = videoPlayer.value;
    if (videoEl) {
        is_video_play.value = true;
        videoEl.play();
    }
};
//#endregion
// 用于样式显示
const style_container = computed(() => common_styles_computer(form.value.common_config));
const frame_style = computed(() => common_store.frame_style + `max-width:100%;width:calc(100% - ${ get_border_left_right_size(form.value.common_config) }px);`);
</script>
<style lang="scss" scoped>
:deep(.model-date) {
    width: 100% !important;
    .el-input__prefix {
        position: absolute;
        top: 0;
        right: 0;
        display: none;
    }
}
.custom-icon {
    position: absolute;
    top: 50%;
    max-height: 16px;
    z-index: 1;
    right: 1rem;
    background: #fff;
    transform: translateY(-50%);
}
// 复选框的处理逻辑
.select-tag {
    color: #a8abb2;
}
.search-input, .search-select-input {
    :deep(.el-input__wrapper) {
        box-shadow: none;
        border-radius: 0;
    }
}
.multi-select {
    :deep(.el-select__wrapper) {
        .el-select__selection {
            flex-wrap: nowrap;
            overflow: hidden;
        }
        .el-select__selection.is-near {
            margin-left: 0;
        }
        .el-select__suffix {
            padding-left: 0.2rem;
        }
    }
}
.add-option {
    cursor: pointer;
}
.oprate {
    display: flex;
    align-items: center;
    border-radius: 15px;
    color: $cr-primary;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
    .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 0.3rem 0.6rem;
    }
}
.subform-upload-setting-box {
    border-radius: 0.4rem;
    border: 0.1rem solid #e3e3e3;
    width: 100%;
    height: 3.2rem;
    background: #fff;
    :deep(.el-dropdown-menu__item:not(.is-disabled)):hover{
        background: #fff;
    }
}
.upload-file {
    width: 2.5rem;
    height: 100%;
    border-radius: 0.4rem;
    color: #fff;
    background: #96ADA9;
}
</style>
